import React, { useState, useEffect } from 'react';
import { Input, message, Table } from 'antd';
import TestResult from './test/testResult';
import services from '../../../../services/api';
import { debounce } from 'lodash';
import './test.less';
import { findVariableName, getVariableName } from 'src/utils/variable';

const Test = (props) => {
  const { variable, using_variables } = props;
  const [logs, setLogs] = useState({});
  const [value, setValue] = useState({});

  useEffect(() => {
    props.value && setValue(props.value);
  }, [props.value]);

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      render: (_, __, index) => index + 1,
    },
    {
      title: '变量名称',
      dataIndex: 'name',
      // render: (text, { param }) => (param ? `${text}.${param}` : text),
      render: (text, { code, var_type, name }) => {
        const tempVarName =
        using_variables && using_variables.length && using_variables.find((item) => item.code === code)
          ? getVariableName(code, using_variables)
          : findVariableName(var_type, code, variable, name);
        return tempVarName
      }
    },
    {
      title: '变量类型',
      dataIndex: 'var_title',
    },
    {
      title: '数据类型',
      dataIndex: 'data_type',
      render: (text) => text || '-',
    },
    {
      title: '测试数据',
      dataIndex: 'value',
      render: (text, { data_type }, index) => (
        <Input
          placeholder='请填写'
          value={text}
          onChange={(e) => handleValueChange(e.target.value, data_type, index)}
        />
      ),
    },
  ];

  const handleValueChange = (text, data_type, index) => {
    const tempValue = { ...value };
    if (['int', 'long'].includes(data_type)) {
      const tempText = text.match(/[0-9-]{0,}/);
      text = tempText ? tempText[0] : '';
    }
    // 限制精度 float类型6位  double类型15位
    if (['float', 'double'].includes(data_type)) {
      const tempText = text.match(/[0-9.-]{0,}/);
      text = tempText ? tempText[0] : '';
      const tempArr = text
        .split('.')
        .filter((_, index) => index < 2)
        .map((item, index) => {
          const num = data_type === 'float' ? 6 : 15;
          if (index && item.length > num) {
            return item.slice(0, num);
          }
          return item;
        });
      text = tempArr.join('.');
    }
    tempValue.variables[index].value = text;
    setValue(tempValue);
  };

  const handleTest = async () => {
    const { code, msg, data } = await services.policy.doTest(value);
    if (!code) {
      setLogs(data);
      message.success(msg);
    } else {
      message.error(msg);
    }
  };

  return (
    <div className='test'>
      <Table columns={columns} dataSource={value.variables} pagination={false} rowKey={(_, index) => index} />
      <span className='test_button' onClick={debounce(handleTest, 300)}>
        测试
      </span>
      <div className='test_detail'>
        <p className='test_detail_title'>测试详情</p>
        <TestResult
          value={value.component}
          logs={logs}
          actions={props.actions}
          variable={variable}
          using_variables={using_variables}
        />
      </div>
    </div>
  );
};
export default Test;
